<template>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <button @click="changeName">改姓名</button>
  <button @click="changeAge">改年龄</button>
  <button @click="showTel">显示手机号</button>
</template>

<script lang="ts">
export default {
  name: "ThreadDemo",
  setup() {
    // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
    let name = "张三";
    let age = 19;
    let tel = 13246546456;
    // 方法，原来写在methods中
    function changeName() {
      name = "Zhang-San"; //注意：此时这么修改name页面是不变化的
    }
    function changeAge() {
      age += 1;
    }
    function showTel() {
      alert(tel);
    }

    // return function thisFunc() { // 返回一个函数，内容会直接渲染，不再使用template中的内容
    //   return "Hello!";
    // };

    //return () => "Hello2!";

    // 返回一个对象，对象中的内容，模板中可以直接使用
    return { name, age, changeName, changeAge, showTel }; //常用，返回一个对象
  },
};
</script>
